<template>
  <el-dialog width="30%" destroy-on-close :show-close="false" :modal="false" :visible="visible" title="转接备注">
    <el-input
      type="textarea"
      :rows="6"
      :placeholder="$t('webchat.transferRemark')"
      v-model="remark"
      show-word-limit
      maxlength="200"
      v-inputAutoFocus
      v-inputHighlightLimit
    />
    <span slot="footer" class="dialog-footer">
      <el-button size="small" @click.stop="onCancel">{{ $t('public.cancel') }}</el-button>
      <el-button size="small" class="ml10" type="primary" @click.stop="internalOk">{{ $t('public.confirm') }}</el-button>
    </span>
  </el-dialog>
</template>
<script type="text/javascript">
import { inputAutoFocus } from '@/directives/input-auto-focus'
import { inputHighlightLimit } from '@/directives/input-highlight-limit'
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    onCancel: {
      type: Function,
      default: () => ({})
    },
    onOk: {
      type: Function,
      default: () => ({})
    }
  },
  data() {
    return {
      remark: ''
    }
  },
  directives: {
    inputAutoFocus,
    inputHighlightLimit
  },
  watch: {
    visible () {
      if (!this.visible) {
        this.remark = ''
      }
    }
  },
  computed: {},
  methods: {
    internalOk() {
      this.onOk(this.remark)
    }
  }
}
</script>
<style lang="stylus" scoped>
.dialog-footer
  text-align right
.ml10
  margin-left 10px
</style>
